<template>
	<w-app-page class="bill-list">
		<fx-header title="历史订单">
		</fx-header>
		<div class="bill-list__content">
			<div class="content-left">
				<h1 style="padding: 20px">历史订单</h1>
				<a-table :columns="columnsLeft" :data-source="listData" :pagination="false" bordered>
					<template #bodyCell="{ column, record }">
						<template v-if="column.key === 'action'">
							<a-button v-show="record.relaType === '3'" @click="removeGift(record)" type="primary" danger size="middle">移除</a-button>
						</template>
					</template>
					<template #summary>
						<a-table-summary-row>
							<a-table-summary-cell>总计</a-table-summary-cell>
							<a-table-summary-cell></a-table-summary-cell>
							<a-table-summary-cell>
								<a-typography-text>{{ totals.totalNum }}</a-typography-text>
							</a-table-summary-cell>
							<a-table-summary-cell></a-table-summary-cell>
							<a-table-summary-cell>
								<a-typography-text type="success">{{ totals.totalMoney }}</a-typography-text>
							</a-table-summary-cell>
							<a-table-summary-cell></a-table-summary-cell>
							<a-table-summary-cell></a-table-summary-cell>
						</a-table-summary-row>
					</template>
				</a-table>
			</div>
		</div>
	</w-app-page>
</template>
<script>
import { defineComponent, ref, computed } from 'vue'
import { listCounterOrderFlowDetail } from '@/js/api/bar'
import { useRoute } from 'vue-router'

export default defineComponent({
	name: 'orderDetail',
	setup () {
		const route = useRoute()

		const routeQuery = route.query
		const listData = ref([])

		const columnsLeft = ref([
			{
				title: '名称',
				dataIndex: 'relaName',
				ellipsis: true
			},
			{
				title: '类型',
				dataIndex: 'relaTypeName',
				ellipsis: true
			},
			{
				title: '数量',
				dataIndex: 'orderNum',
				ellipsis: true,
				width: 150
			},
			{
				title: '单价(元)',
				dataIndex: 'unitPrice',
				ellipsis: true,
				width: 150
			},
			{
				title: '总价(元)',
				dataIndex: 'totalPrice',
				ellipsis: true,
				width: 150
			},
			{
				title: '状态',
				dataIndex: 'orderFlowDetailStatusName',
				ellipsis: true,
				width: 150
			},
			{
				title: '时间',
				dataIndex: 'createTime',
				ellipsis: true,
				width: 200
			}
		])
		const fetchData = async () => {
			listCounterOrderFlowDetail(routeQuery).then(res => {
				listData.value = res.data
			})
		}

		const totals = computed(() => {
			let totalNum = 0
			let totalMoney = 0

			listData.value.forEach(({ orderNum, totalPrice }) => {
				totalNum += orderNum
				totalMoney += totalPrice
			})
			return { totalNum, totalMoney }
		})
		const init = () => {
			fetchData()
		}
		init()
		return {
			fetchData,
			listData,
			columnsLeft,
			totals
		}
	}
})
</script>
<style lang="scss" scoped>
@import "$assets/stylus/varsty";
.bill-list {
	display: flex;
	align-items: center;
	&__content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: auto;
		width: 100%;
		flex: 1;
		.content-left {
			width: 100%;
			height: 100%;
			text-align: center;
		}
	}
}
</style>
